<template>
	<view class="page" :style="{'height':h+'px'}">
		<c-nav-bar title="商户详情"></c-nav-bar>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="lunbo">
				<u-swiper :list="picList" @change="e => current = e.current" :autoplay="false" :circular="true"
					indicatorStyle="right: 20px" height="408rpx">
				</u-swiper>
			</view>
			<view class="info">

				<view class="i_title">{{object.name}}</view>
				<view class="time">营业时间：{{object.openDate}}</view>
				<view class="address" @click="goLocation(object)">
					<image :src="map"></image>
					<text>地址：{{object.areaDetail}}</text>
					<u-icon name="arrow-right" color="#AAAAAA" size="26"></u-icon>
				</view>
			</view>

			<view class="t_spts">

				<view class="tit">
					商户介绍
				</view>
				<u-parse :content="object.introduce"></u-parse>
				<view class="tit">
					商家经营信息
				</view>
				<view class="li">
					<text>船型数量</text>
					<text class="txt" style="margin: 0;text-align:left;flex: 1;">{{object.shipNum||0}}艘</text>
				</view>
				<view class="li">
					<text>联系方式</text>
					<text class="txts">{{object.phone}}</text>
					<image class="img" src="https://i.ringzle.com/file/20240516/c64216465413493999f22d68997ad56e.png"
						@tap="callPhone(object.phone)"></image>
				</view>
				<view class="tit" style="padding-top: 20rpx;">
					企业资质
				</view>
				<view class="li">
					<text>公司名称</text>
					<text class="txts">{{object.name}}</text>
				</view>
				<view class="li">
					<text>经营许可证</text>
					<text class="txts">{{object.creditCode}}</text>
				</view>
				<view class="xkz">
					<image :src="object.licensePic"></image>
				</view>
				<view class="li">
					<text>监督电话</text>
					<text class="txts">0580-5596306</text>
					<image class="img" src="https://i.ringzle.com/file/20240516/c64216465413493999f22d68997ad56e.png"
						@tap="callPhone('0580-5596306')"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				map: 'https://i.ringzle.com/file/20240312/a823851e217949e99f3c8db7054fe0a8.png',
				h: uni.getSystemInfoSync().windowHeight - 57,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				object: {

				},
				id: '',
				tabIndex: 1,
				picList: [],
			}
		},
		onLoad(opt) {
			this.getDetail()
		},
		filters: {
			filtersRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, (match, capture) => {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
					return newContent;
				}
			},
		},
		methods: {
			//导航
			goLocation(option) {
				let mapdata = {
					latitude: parseFloat(option.latitude),
					longitude: parseFloat(option.longitude),
					name: option.areaDetail,
				}
				uni.openLocation(mapdata);
			},
			//电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getDetail() {
				this.$api.get('/api/merchant/food/merchant/1748948099092451329')
					.then(res => {
						if (res.data.data) {
							this.object = res.data.data;
						}
						this.picList = this.object.storeFrontPic.split(',')
					})
			},
		}
	}
</script>

<style scoped lang="less">
	.page {
		overflow-y: auto;
		background-color: #F5F8FA;

		.content {
			.lunbo {
				width: 100%;
				height: 408rpx;
			}

			.info {
				width: 100%;
				background: #fff;
				padding: 46rpx 30rpx 36rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;


				.i_title {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}

				.time {
					color: #777777;
					font-size: 26rpx;
					margin: 17rpx 0 33rpx;
				}

				.address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #777;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						width: 100px;
						font-size: 26rpx;
						flex: 1;
						margin-left: 8rpx;
					}
				}
			}
		}

		.t_spts {
			padding: 40rpx 30rpx 160rpx;
			background-color: #fff;

			.tit {
				margin-bottom: 40rpx;
				font-size: 32rpx;
				color: #111;
				font-weight: bold;
			}

			.txt {
				line-height: 48rpx;
				color: #333;
				font-size: 28rpx;
				margin-bottom: 48rpx;
				margin-top: -20rpx;
			}

			.li {
				margin-bottom: 36rpx;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					&:first-child {
						width: 150rpx;
						margin-right: 30rpx;
						color: #777;
					}

					&.txts {
						color: #111;
						text-align: left;
						flex: 1;
					}
				}

				.img {
					width: 54rpx;
					height: 54rpx;
				}
			}

			.xkz {
				width: 640rpx;
				height: 384rpx;
				margin: 100rpx auto 160rpx;
			}
		}


		/deep/.u-popup__content {
			border-radius: 32rpx 32rpx 0 0;
		}

		/deep/.u-scroll-list {
			padding-bottom: 0;
		}
	}
</style>